<template>
    <div id="gauge" :style="{height:height,width:width}" ref="gauge"></div>
</template>

<script>

/**
 * 转速表1
 */
export default {
    name: 'gauge',
    props: {
        value: {
            type: String,
            default: '30'
        },
        title: {
            type: String,
            default: '标题'
        },
        unit: {
            type: String,
            default: '单位'
        },
        min: {
            type: String,
            default: '0'
        },
        max: {
            type: String,
            default: '100'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        params: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            config: {
                min: this.min,
                max: this.max
            }
        }
    },
    mounted() {
        if (this.params != null && this.params !== '') {
            let obj = JSON.parse(this.params)
            let min = obj['min']
            if (min !== undefined) {
                this.config.min = min
            }
            let max = obj['max']
            if (max !== undefined) {
                this.config.max = max
            }
        }
        this.getGauge()
    },
    methods: {
        getGauge() {
            const chartDom = this.$refs.gauge
            // console.log('echarts ', this.$echarts)
            const myChart = this.$echarts.init(chartDom)
            let option

            // 配置项
            option = {
                series: [
                    {
                        min: parseFloat(this.config.min),
                        max: parseFloat(this.config.max),
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                // 宽度
                                width: 20,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'inherit'
                            }
                        },
                        axisTick: {
                            distance: -30,
                            // 刻度，值越大，刻度线越长
                            length: 16,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -30,
                            length: 30,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'inherit',
                            distance: 30,
                            fontSize: 15
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: `{value} ${this.unit}`,
                            color: 'inherit',
                            // 数值 单位字体大小
                            fontSize: 14
                        },
                        // 设置仪表盘中间显示文字样式
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        title: {
                            textStyle: {
                                fontWeight: 'bolder',
                                color: 'inherit',
                                // 标题大小
                                fontSize: 12
                            }
                        },
                        data: [
                            {
                                value: this.value,
                                name: this.title
                            }
                        ]
                    }
                ]
            }
            // 调用option配置
            option && myChart.setOption(option)

            window.addEventListener('resize', function () {
                myChart.resize()
            })
        }
    }
}

</script>
